<template>
  <view class="climber-setting">
    <!-- 头部导航 -->
    <view class="header">
      <view class="nav-bar">
        <view class="nav-left" @tap="goBack">
          <text class="back-icon">‹</text>
        </view>
        <text class="nav-title">应用设置</text>
        <view class="nav-right">
          <text class="nav-icon">⋯</text>
          <text class="nav-icon">◎</text>
        </view>
      </view>
    </view>

    <!-- 设置选项 -->
    <view class="settings-section">
      <view class="setting-item" @tap="goToChangePassword">
        <view class="setting-left">
          <text class="setting-icon">🔒</text>
          <text class="setting-text">修改密码</text>
        </view>
        <text class="setting-arrow">›</text>
      </view>

      <view class="setting-item" @tap="checkUpdate">
        <view class="setting-left">
          <text class="setting-icon">🔄</text>
          <text class="setting-text">检查更新</text>
        </view>
        <text class="setting-arrow">›</text>
      </view>

      <view class="setting-item" @tap="clearCache">
        <view class="setting-left">
          <text class="setting-icon">🧹</text>
          <text class="setting-text">清理缓存</text>
        </view>
        <text class="setting-arrow">›</text>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <button class="logout-btn" @tap="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    goToChangePassword() {
      uni.navigateTo({ url: '/pages/climber/pwd/index' })
    },
    checkUpdate() {
      uni.showModal({
        title: '检查更新',
        content: '当前已是最新版本',
        showCancel: false
      })
    },
    clearCache() {
      uni.showModal({
        title: '清理缓存',
        content: '确定要清理缓存吗？',
        success: (res) => {
          if (res.confirm) {
            // TODO: 实现清理缓存逻辑
            uni.showToast({
              title: '缓存清理成功',
              icon: 'success'
            })
          }
        }
      })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.$store.dispatch('LogOut').then(() => {
              uni.reLaunch({ url: '/pages/login' })
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.climber-setting {
  min-height: 100vh;
  background: #f5f6f7;
}

/* 头部导航 */
.header {
  background: #fff;
  padding-top: var(--status-bar-height);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
}

.nav-left {
  width: 80rpx;
}

.back-icon {
  font-size: 48rpx;
  color: #333;
  font-weight: 300;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.nav-right {
  width: 80rpx;
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
}

.nav-icon {
  font-size: 32rpx;
  color: #333;
}

/* 设置选项 */
.settings-section {
  background: #fff;
  margin: 20rpx 32rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-left {
  display: flex;
  align-items: center;
}

.setting-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.setting-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.setting-arrow {
  font-size: 40rpx;
  color: #ccc;
}

/* 退出登录 */
.logout-section {
  padding: 0 32rpx;
  margin-top: 40rpx;
}

.logout-btn {
  width: 100%;
  height: 88rpx;
  background: #fff;
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #f44336;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
